import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { rules } from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
import { h } from '@vue/runtime-core';
import { Input } from 'ant-design-vue';

//列表数据
export const columns: BasicColumn[] = [
  /*{
    title: '公司展示图',
    align: 'center',
    dataIndex: 'companyShow',
    customRender: render.renderImage,
  },
  {
    title: '商品展示图',
    align: 'center',
    dataIndex: 'productShow',
    customRender: render.renderImage,
  },*/
  {
    title: '名字',
    align: 'center',
    dataIndex: 'name',
  },
  {
    title: '最低价格',
    align: 'center',
    dataIndex: 'minPrice',
  },
  {
    title: '最高价格',
    align: 'center',
    dataIndex: 'maxPrice',
  },
  {
    title: '评分',
    align: 'center',
    dataIndex: 'score',
  },
  {
    title: '省市区',
    align: 'center',
    dataIndex: 'province',
    slots: { customRender: 'pcaSlot' },
  },
  {
    title: '详细地址',
    align: 'center',
    dataIndex: 'address',
  },
  {
    title: '手机号',
    align: 'center',
    dataIndex: 'phone',
  },
  {
    title: '分类',
    align: 'center',
    dataIndex: 'catelogId_dictText',
  },
  /*  {
    title: '分类名称',
    align:"center",
    dataIndex: 'catelogName'
   },*/
  {
    title: '内容',
    align: 'center',
    dataIndex: 'content',
    slots: { customRender: 'htmlSlot' },
  },
];
//查询数据
export const searchFormSchema: FormSchema[] = [
  {
    label: '店铺名称', //显示label
    field: 'name', //查询字段
    component: 'JInput', //渲染的组件
    defaultValue: '', //设置默认值
  },
  {
    label: '手机号', //显示label
    field: 'phone', //查询字段
    component: 'JInput', //渲染的组件
    defaultValue: '', //设置默认值
  },

];
let lat = '';
let lng = '';
const geocoder = new AMap.Geocoder({});
//表单数据
export const formSchema: FormSchema[] = [
  {
    label: '平台的店铺首页',
    field: 'homeShow',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 10,
    },
  },
  {
    label: '店铺的店铺图',
    field: 'companyShow',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 10,
    },
  },
  {
    label: '店铺的产品图',
    field: 'productShow',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 10,
    },
  },
  {
    label: '店铺的轮播图',
    field: 'promotionalShow',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 10,
    },
  },
  {
    label: '名字',
    field: 'name',
    component: 'Input',
  },
  {
    label: '最低价格',
    field: 'minPrice',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!' }];
    },
  },
  {
    label: '最高价格',
    field: 'maxPrice',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!' }];
    },
  },
  {
    label: '评分',
    field: 'score',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }];
    },
  },
  {
    label: '省市区',
    field: 'province',
    component: 'JAreaLinkage',
  },
  {
    label: '详细地址',
    field: 'address',
    component: 'Input',
    //model 单签表单对象，field 当前字段
    render: ({ model, field }) => {
      //渲染自定义组件，以Input为例
      return h(Input, {
        placeholder: '请输入详细地址',
        value: model[field],
        style: { width: '100%' },
        type: 'string',
        onChange: (e: ChangeEvent) => {
          // console.log('change-wrap-tips');
          // console.log(model,field,'modelfield');
          model[field] = e.target.value;
          geocoder.getLocation(e.target.value, function (status, result) {
            if (status === 'complete' && result.geocodes) {
              const lnglat = result.geocodes[0].location;
              lat = lnglat.lat;
              lng = lnglat.lng;
              model['longitude'] = lng;
              model['latitude'] = lat;
            } else {
              lat = '';
              lng = '';
              model['longitude'] = lng;
              model['latitude'] = lat;
            }
          });
          if (e.target.value == '') {
            lat = '';
            lng = '';
            model['longitude'] = lng;
            model['latitude'] = lat;
          }
        },
      });
    },
  },
  {
    label: '精度',
    field: 'longitude',
    component: 'Input',

    //渲染 values当前表单所有值
    // render: ({ values }) => {
    //   console.log(values,'精度values');
    //   console.log(lng,'lng');
    //   return lng;
    // },
  },
  {
    label: '维度',
    field: 'latitude',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }];
    },
  },
  {
    label: '手机号',
    field: 'phone',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!' }];
    },
  },
  {
    label: '分类',
    field: 'catelogId',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'a_catalog,name,id',
      stringToNumber: true,
    },
  },
  /* {
    label: '分类名称',
    field: 'catelogName',
    component: 'Input',
  },*/
  {
    label: '内容',
    field: 'content',
    component: 'JEditor',
  },
  // TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
];
//子表单数据
//子表表格配置
export const designerColumns: JVxeColumn[] = [
  {
    title: '头像',
    key: 'avatar',
    type: JVxeTypes.image,
    token: true,
    responseName: 'message',
    width: '200px',
    // placeholder: '请输入${title}',
    // defaultValue:'',
  },
  {
    title: '姓名',
    key: 'name',
    type: JVxeTypes.input,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  {
    title: '性别',
    key: 'sex',
    type: JVxeTypes.select,
    dictCode: 'sex',
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  {
    title: '手机号',
    key: 'phone',
    type: JVxeTypes.input,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
    validateRules: [{ required: false }, { pattern: 'm', message: '${title}格式不正确' }],
  },
  {
    title: '备注',
    key: 'remark',
    type: JVxeTypes.textarea,
    width: '200px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  /* {
      title: '公司id',
      key: 'companyId',
      type: JVxeTypes.input,
      width:"200px",
      disabled:true,
      placeholder: '请输入${title}',
      defaultValue:'',
    },*/
];

export const discountColumns: JVxeColumn[] = [
 /* {
    title: '公司id',
    key: 'companyId',
    type: JVxeTypes.inputNumber,
    width:"200px",
    placeholder: '请输入${title}',
    defaultValue:'',
  },*/
  {
    title: '图片',
    key: 'pic',
    type: JVxeTypes.image,
    token:true,
    responseName:"message",
    width:"200px",
    placeholder: '请输入${title}',
    defaultValue:'',
  },
  {
    title: '文本',
    key: 'text',
    type: JVxeTypes.input,
    width:"200px",
    placeholder: '请输入${title}',
    defaultValue:'',
  },
];


/**
 * 流程表单调用这个方法获取formSchema
 * @param param
 */
export function getBpmFormSchema(_formData): FormSchema[] {
  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
  return formSchema;
}
